<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>filter_selector</title>
<script type="text/javascript" src="/jQuery_class_stu/jquery.js"></script>

<script type="text/javascript">
function selectorTest() {
	//id가 memberTb의 자손중 tr중에 짝수(배열 index기준 즉, 0번 부터)
	$("#memberTb tr:even").css("color","orange");
	//2번째 index이후
	$("#productTb tr:gt(2)").css("color","pink");
	//2번째 index이전
	$("#productTb tr:lt(2)").css("color","blue");
	//2번째 index
	$("#productTb tr:eq(2)").css("color","green");

}
function getTxt() {
	//#txt인 text에 입력된 값을 가지고 있는 td의 배경색을 변경
	//var txt = document.getElementById("txt").value;
	var txt =$("#txt").val();//입력 요소의 value값을 조회
	if(txt==""){
		alert("조회하려는 문자를 넣으세요");
		return;
	}
	//이전에 선택된것 원상 복구
	$("td").css("background-color","white").css("color","black");
	$("td:contains('"+txt+"')").css("background-color","pink").css("color","purple");
	
}
</script>
</head>
<body>
<button onClick="selectorTest()"> 클릭 </button><p>
	<input type="text" id="txt"><input type="button" value="조회" onclick="getTxt()">
	<table border='1' id="memberTb">
		<tr>
			<td>ID</td>
			<td>이름</td>
			<td>주소</td>
			<td>전화번호</td>
			<td>마일리지</td>
		</tr>
		<tr>
			<td>aaaa</td>
			<td>이순신</td>
			<td>서울</td>
			<td>02-111-2222</td>
			<td>30000</td>
		</tr>
		<tr>
			<td>bbbb</td>
			<td>홍길동</td>
			<td>인천</td>
			<td>032-222-3333</td>
			<td>40000</td>
		</tr>
		<tr>
			<td>cccc</td>
			<td>유관순</td>
			<td>부산</td>
			<td>051-222-3333</td>
			<td>350000</td>
		</tr>
		<tr>
			<td>dddd</td>
			<td>장영실</td>
			<td>광주</td>
			<td>062-555-6666</td>
			<td>92000</td>
		</tr>
		<tr>
			<td>eeee</td>
			<td>김유신</td>
			<td>경주</td>
			<td>054-777-1222</td>
			<td>50000</td>
		</tr>
		<tr>
			<td>ffff</td>
			<td>계백</td>
			<td>부여</td>
			<td>042-421-7334</td>
			<td>940000</td>
		</tr>
	</table>
	<br>
	<table border="1" id="productTb">
		<tr>
			<th>상품ID</th>
			<th>상품명</th>
			<th>제조사</th>
			<th>가격</th>
		</tr>
		<tr>
			<td>p-1</td>
			<td>LG 3D TV</td>
			<td>LG 전자</td>
			<td>230000</td>
		</tr>
		<tr>
			<td>p-2</td>
			<td>파브 3D TV</td>
			<td>삼성 전자</td>
			<td>200000</td>
		</tr>
		<tr>
			<td>p-3</td>
			<td>하우젠 냉장고</td>
			<td>삼성 전자</td>
			<td>150000</td>
		</tr>
		<tr>
			<td>p-4</td>
			<td>x-note</td>
			<td>LG 전자</td>
			<td>320000</td>
		</tr>
	</table>
</body>
</html>
